@charset "utf-8";
@import "common/reset";

@function n($px) {
    @return $px/2;
}
$border-color: #ff9344; //边框颜色
.web {
    position: relative;
    width: 100%;
    overflow: hidden;
    header {
        height: n(150px);
        .left {
            width: n(146px);
            //          height:n( 140px);
            //          background-color: red;
            img {
                width: n(123px);
                margin-left: n(23px);
                margin-top: n(17px);
            }
        }
        .right {
            width: n(184px);
            select {
                -webkit-appearance: none; //清除原始样式
                width: n(159px);
                height: n(55px);
                border: n(2px) solid #ff9344;
                background: url("../img/下拉框_03.png") no-repeat right n(12px) top n(22px) #ffffff;
                background-size: n(30px) n(16px);
                border-radius: n(3px);
                text-indent: n(13px);
                margin-right: n(22px);
                margin-top: n(48px);
                font-size: n(26px);
            }
        }
        .middle {
            //          height:n(100px);
            overflow: hidden;
            //          background-color: yellow;
            .search {
                margin: 0 auto;
                width: n(268px);
                height: n(50px);
                border: $border-color n(2px) solid;
                border-radius: n(25px);
                margin-top: n(53px);
                line-height: n(50px);
                vertical-align: middle;
                font-size: 0;
                input {
                    height: n(50px);
                    line-height: n(50px);
                    vertical-align: middle;
                    margin-left: n(18px);
                    padding: 0 n(12px);
                    font-size: n(24px);
                    border: none;
                    background: none;
                    width: n(195px);
                    vertical-align: middle;

                }
                i {
                    vertical-align: middle;
                    color: $border-color;
                    margin-left: n(-13px);

                }
            }
        }
    }
    nav {
        width: 100%;
        height: n(287px);
        img {
            width: 100%;
        }
    }
    section {
        width: 100%;
        margin-bottom: n(120px);
        .middlex {
            width: 100%;

            .middle_left {
                width: n(190px);

                line-height: n(107px);
                vertical-align: middle;
                //                  background: yellow;
                margin-left: n(20px);
                margin-top: n(8px);
                i {
                    font-size: n(58px);
                    color: $border-color;
                }
                span {
                    font-size: n(30px);
                }
            }
            .middle_right {

                line-height: n(107px);
                vertical-align: middle;
                //                  background: yellow;
                margin-right: n(20px);
                margin-top: n(8px);

                i {
                    color: $border-color;
                    vertical-align: middle;
                }
                span {
                    font-size: n(24px);
                }
            }
        }
        .pic_1 {
            width: 50%;
            font-size: 0;
            img {
                width: n(243px);
                height: n(97px);
                overflow: hidden;
                margin-left: n(77px);

            }
        }
        .pic_2 {
            width: 50%;
            font-size: 0;
            img {
                width: n(243px);
                height: n(97px);
                overflow: hidden;
                margin-left: n(77px);

            }

        }
        .pic_3 {
            width: 50%;
            font-size: 0;
            margin-top: n(30px);
            img {
                width: n(243px);
                height: n(97px);
                overflow: hidden;
                margin-left: n(77px);

            }

        }
        .pic_4 {
            width: 50%;
            font-size: 0;
            margin-top: n(30px);
            img {
                width: n(243px);
                height: n(97px);
                overflow: hidden;
                margin-left: n(77px);

            }

        }
        .caixi {
            width: 100%;

            img {
                width: n(213px);
                height: n(142px);
                float: left;
            }
            dl:nth-of-type(2) {
                float: right;
                width: n(131px);
                height: n(142px);
                margin-top: n(16px);
                dd {
                    &:nth-of-type(1) {
                        font-size: n(22px);
                        color: #494949;
                    }
                    &:nth-of-type(2) {
                        font-size: n(22px);
                        color: #494949;
                        margin-top: n(50px);
                    }
                }
            }
            dl:nth-of-type(1) {
                float: left;
                margin-left: n(16px);
                margin-top: n(32px);
                dd {
                    &:nth-of-type(1) {
                        font-size: n(30px);
                    }
                    &:nth-of-type(2) {
                        font-size: n(22px);
                        color: #494949;
                    }
                    &:nth-of-type(3) {
                        font-size: n(32px);
                        color: $border-color;
                    }
                }
            }
        }
    }
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        ul {
            li {
                float: left;
                width: 25%;
                a {
                    display: block;
                    text-align: center;
                    color: black;
                    i {
                        font-size: n(68px);
                        color: $border-color;
                    }
                    h2 {
                        font-size: n(26px);
                        margin-top: n(9px);
                        margin-bottom: n(14px);

                    }
                }
            }
        }
    }
}
